:root {
  --loc: 50% 50%;
}
html {
/*   --loc: 50% 50%; */
  overflow: hidden;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 3vw;
  line-height: calc(100vh / 10);
  background: 
    radial-gradient(circle, transparent, black),
    indigo;
  color: white;
}
body { 
  margin: 0; 
  perspective: 1000px;
}
body:after {
  content:'';
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(circle at var(--loc), transparent, black 75%);
  z-index: 2;
  transition: background 3s;
}

h1 {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  margin: 0;
  font-size: 10vw;
  line-height: 90%;
  color: gold;
  font-weight: 400;
  text-shadow:
    0 1px black,
    0 2px black,
    0 3px black,
    0 4px black,
    0 5px black,
    0 6px black,
    0 7px black,
    0 8px black,
    0 9px black,
    0 10px black,
    0 11px black,
    0 12px black,
    0 13px black,
    0 14px black,
    0 15px black,
    0 16px black,
    0 17px black,
    0 18px black,
    0 19px black,
    0 20px black,
    0 21px black,
    0 22px black,
    0 23px black,
    0 24px black,
    0 25px black,
    0 50px 100px black;
  transform: translate(-50%, -50%) rotateX(35deg);
}

div {
  width: calc(100vw / 10);
  height: calc(100vh / 10);
  display: inline-block;
  padding: 0;
  box-sizing: border-box;  
  z-index: -1;
}

.spin {
  animation: spin 2s linear forwards;
}
@keyframes spin {
  100% { transform: rotateY(360deg); }
}